
<template>
  <div>
<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="18">
    <div class="grid-content bg-purple-light">
        <ul class="flex-container">
            <li class="nav" v-for="list in list" :key="list.id">
                {{list.name}}
            </li>
        </ul>
    </div>
    </el-col>
</el-row>
  </div>
</template>
  <script>
export default {
  data() {
    return {
        list:[
            {id:1,name:'推荐'},
            {id:2,name:'关注'},
            {id:3,name:'其他'},
            {id:4,name:'其他'},
            {id:5,name:'其他'},
            {id:6,name:'其他'},
            {id:7,name:'其他'},
            {id:8,name:'其他'},
            {id:9,name:'其他'},
            {id:10,name:'其他'},
        ]
    };
  },
  components: {},
  methods: {

  },
};
</script>
  
<style>
.flex-container {  
  display: flex;  
  justify-content: space-around; /* 可以根据需要调整对齐方式 */  
  line-height: 52px;
}  
.nav{
    width: 60px;
    list-style: none;
}
  .el-row {
    margin-bottom: 20px;
    /* &:last-child {
      margin-bottom: 0;
    } */
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    /* background-color: #f9fafc; */
  }
</style>